<template>
  <div class="area">
    <div class="province-wrap">
      <el-input
        @keyup.native.enter="refreshProvinceList"
        placeholder="请输入名称或代码"
        v-model="province.searchWord"
      ></el-input>
      <div class="button-row">
        <el-button type="success" size="mini" @click="clickAddProvinceBtn">增加省份</el-button>
        <el-button type="info" size="mini" @click="clickEditProvinceBtn">修改省份</el-button>
        <el-button type="danger" size="mini" @click="clickProvinceDeleteBtn">删除省份</el-button>
      </div>
      <el-table
        :data="province.list"
        size="mini"
        stripe
        border
        style="width: 100%"
        highlight-current-row
        @row-click="clickProvince"
      >
        <el-table-column prop="code" label="代码" width="100"></el-table-column>
        <el-table-column prop="name" label="省份"></el-table-column>
      </el-table>
    </div>
    <div class="city-wrap">
      <el-input
        placeholder="请输入名称或代码"
        v-model="city.searchWord"
        @keyup.native.enter="refreshCityList"
      ></el-input>
      <div class="button-row">
        <el-button type="success" size="mini" @click="clickAddCityBtn">增加城市</el-button>
        <el-button type="info" size="mini" @click="clickUpdateCityBtn">修改城市</el-button>
        <el-button type="danger" size="mini" @click="clickDeleteCityBtn">删除城市</el-button>
      </div>
      <el-table
        :data="city.list"
        size="mini"
        stripe
        border
        style="width: 100%"
        highlight-current-row
        @row-click="clickCity"
      >
        <el-table-column prop="code" label="代码" width="100"></el-table-column>
        <el-table-column prop="name" label="城市"></el-table-column>
      </el-table>
    </div>
    <div class="district-wrap">
      <el-input placeholder="请输入名称或代码" v-model="district.searchWord" @keyup.native.enter="refreshDistrictList"></el-input>
      <div class="button-row">
        <el-button type="success" size="mini" @click="clickAddDistrictBtn">增加区县</el-button>
        <el-button type="info" size="mini" @click="clickUpdateDistrictBtn">修改区县</el-button>
        <el-button type="danger" size="mini" @click="clickDistrictDeleteBtn">删除区县</el-button>
      </div>
      <el-table
        :data="district.list"
        size="mini"
        stripe
        border
        style="width: 100%"
        highlight-current-row
        @row-click="clickDistrict"
      >
        <el-table-column prop="code" label="代码" width="100"></el-table-column>
        <el-table-column prop="name" label="区/县"></el-table-column>
      </el-table>
    </div>
    <el-dialog class="province-add-dialog" title="新增省份" :visible.sync="province.showAddDialog">
      <div>
        代码：
        <el-input placeholder="输入省份代码" v-model="province.newCode" maxlength="2">
          <template slot="append">0000</template>
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="输入省份名称" v-model="province.newName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="province.showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleAddProvinceBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="province-update-dialog" title="修改省份" :visible.sync="province.showEditDialog">
      <div>
        代码：
        <el-input placeholder="输入省份代码" v-model="province.newCode" maxlength="2">
          <template slot="append">0000</template>
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="输入省份代码" v-model="province.newName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="province.showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleEditProvinceBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="city-add-dialog" title="新增城市" :visible.sync="city.showAddDialog">
      <div>
        省份：
        <el-input :disabled="true" v-model="currentProvinceName" />
      </div>
      <div>
        代码：
        <el-input placeholder="输入城市代码" v-model="city.newCode" maxlength="2">
          <template slot="prepend">{{currentProvinceCode}}</template>
          <template slot="append">00</template>
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="输入城市名称" v-model="city.newName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="city.showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleAddCityBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="city-edit-dialog" title="修改城市" :visible.sync="city.showEditDialog">
      <div>
        省份：
        <el-input :disabled="true" v-model="currentProvinceName" />
      </div>
      <div>
        代码：
        <el-input placeholder="输入城市代码" v-model="city.newCode" maxlength="2">
          <template slot="prepend">{{currentProvinceCode}}</template>
          <template slot="append">00</template>
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="输入城市代码" v-model="city.newName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="city.showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleEditCityBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="district-add-dialog" title="新增区/县" :visible.sync="district.showAddDialog">
      <div>
        城市：
        <el-input :disabled="true" v-model="currentCityName" />
      </div>
      <div>
        代码：
        <el-input placeholder="输入区/县代码" v-model="district.newCode" maxlength="2">
          <template slot="prepend">{{currentProvinceCode}}{{currentCityCode}}</template>
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="输入区/县名称" v-model="district.newName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="district.showAddDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleAddDistrictBtn">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="district-edit-dialog" title="修改城市" :visible.sync="district.showEditDialog">
      <div>
        城市：
        <el-input :disabled="true" v-model="currentCityName" />
      </div>
      <div>
        代码：
        <el-input placeholder="输入区县代码" v-model="district.newCode" maxlength="2">
          <template slot="prepend">{{currentProvinceCode}}{{currentCityCode}}</template>
        </el-input>
      </div>
      <div>
        名称：
        <el-input placeholder="输入区县名称" v-model="district.newName" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="district.showEditDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleEditDistrictBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Input, Button, Table, TableColumn, Dialog } from 'element-ui';
import {  getProvinceList,
  deleteProvince,
  addProvince,
  updateProvince,
  getCityList,
  addCity,
  updateCity,
  deleteCity,
  getDistrictList,
  addDistrict,
  updateDistrict,
  deleteDistrict
} from '@/api/area.js';
export default {
  name: 'area-manage',
  components: {
    [Input.name]: Input,
    [Button.name]: Button,
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Dialog.name]: Dialog
  },
  data () {
    return {
      province: {
        list: [],
        currentSelect: null,
        searchWord: null,
        showEditDialog: false,
        showAddDialog: false,
        newName: null,
        newCode: null
      },
      city: {
        list: [],
        currentSelect: null,
        searchWord: null,
        showEditDialog: false,
        showAddDialog: false,
        newName: null,
        newCode: null
      },
      district: {
        list: [],
        currentSelect: null,
        searchWord: null,
        showEditDialog: null,
        showAddDialog: null,
        newName: null,
        newCode: null
      }
    };
  },
  mounted () {
    this.refreshProvinceList();
  },
  methods: {
    clickProvince (row) {
      this.province.currentSelect = row.id;
      this.refreshCityList();
    },
    clickCity (row) {
      this.city.currentSelect = row.id;
      this.refreshDistrictList();
    },
    clickDistrict (row) {
      this.district.currentSelect = row.id;
    },
    clickAddProvinceBtn () {
      this.province.newName = null;
      this.province.newCode = null;
      this.province.showAddDialog = true;
    },
    clickEditProvinceBtn () {
      if (this.province.currentSelect == null) {
        this.$alert("请选择要编辑的省份");
        return;
      }
      this.province.newName = this.currentProvinceName;
      this.province.newCode = this.currentProvinceCode.substring(0, 2);
      this.province.showEditDialog = true;
    },
    handleAddProvinceBtn () {
      addProvince({
        code: this.province.newCode,
        name: this.province.newName
      }).then(res => {
        this.province.showAddDialog = false;
        this.refreshProvinceList();
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    handleEditProvinceBtn () {
      updateProvince({
        provinceId: this.province.currentSelect,
        code: this.province.newCode,
        name: this.province.newName
      }).then(res => {
        this.refreshProvinceList();
        this.province.showEditDialog = false;
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    clickProvinceDeleteBtn () {
      if (this.province.currentSelect == null) {
        this.$alert('请选择省份后操作');
        return;
      }
      this.$confirm('确认删除该省份', '提示', {
        type: 'warning'
      }).then(() => {
        deleteProvince(this.province.currentSelect)
          .then(res => {
            this.refreshProvinceList();
          }).catch(errMsg => this.$alert(errMsg.msg))
      }).catch(() => { })
    },
    clickAddCityBtn () {
      if (this.province.currentSelect == null) {
        this.$alert("请选择省份");
        return;
      }
      this.city.newName = null;
      this.city.newCode = null;
      this.city.showAddDialog = true;
    },
    clickUpdateCityBtn () {
      if (this.city.currentSelect == null) {
        this.$$alert("请先选择城市");
        return;
      }
      this.city.newName = this.currentCityName;
      this.city.newCode = this.currentCityCode;
      this.city.showEditDialog = true;
    },
    clickDeleteCityBtn () {
      if (this.city.currentSelect == null) {
        this.$alert('请选择城市后操作');
        return;
      }
      this.$confirm('确认删除该城市', '提示', {
        type: 'warning'
      }).then(() => {
        deleteCity(this.city.currentSelect)
          .then(res => {
            this.refreshCityList();
          }).catch(errMsg => this.$alert(errMsg.msg))
      }).catch(() => { })
    },
    clickUpdateDistrictBtn () {
      if (this.district.currentSelect == null) {
        this.$alert("请先选择要操作的区县");
        return;
      }
      this.district.newName = this.currentDistrictName;
      this.district.newCode = this.currentDistrictCode;
      this.district.showEditDialog = true;
    },
    clickDistrictDeleteBtn () {
      if (this.district.currentSelect == null) {
        this.$alert('请选择区/县后操作');
        return;
      }
      this.$confirm('确认删除该区/县', '提示', {
        type: 'warning'
      }).then(() => {
        deleteDistrict(this.district.currentSelect)
          .then(res => {
            this.refreshDistrictList();
          }).catch(errMsg => this.$alert(errMsg.msg))
      }).catch(() => { })
    },
    handleAddCityBtn () {
      addCity({
        code: this.city.newCode,
        name: this.city.newName,
        provinceId: this.province.currentSelect
      }).then(res => {
        this.refreshCityList();
        this.city.showAddDialog = false;
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    handleEditCityBtn () {
      if (this.city.currentSelect == null) {
        this.$alert("请选择城市");
        return;
      }
      updateCity({
        provinceId: this.province.currentSelect,
        cityId: this.city.currentSelect,
        code: this.city.newCode,
        name: this.city.newName
      }).then(res => {
        this.refreshCityList();
        this.city.showEditDialog = false;
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    clickAddDistrictBtn () {
      if (this.city.currentSelect == null) {
        this.$alert("请选择区县所属城市");
        return;
      }
      this.district.newName = null;
      this.district.newCode = null;
      this.district.showAddDialog = true;
    },
    handleAddDistrictBtn () {
      addDistrict({
        code: this.district.newCode,
        name: this.district.newName,
        cityId: this.city.currentSelect
      }).then(res => {
        this.refreshDistrictList();
        this.district.showAddDialog = false;
      })
    },
    handleEditDistrictBtn () {
      updateDistrict({
        districtId: this.district.currentSelect,
        cityId: this.city.currentSelect,
        code: this.district.newCode,
        name: this.district.newName
      }).then(res => {
        this.refreshDistrictList();
        this.district.showEditDialog = false;
      })
    },
    refreshProvinceList () {
      getProvinceList({
        searchWord: this.province.searchWord
      }).then(res => {
        this.province.list = res;
        this.province.currentSelect = null;
        this.refreshDistrictList();
      }).catch(errMsg => {
        this.$alert(errMsg.msg);
      })
    },
    refreshCityList () {
      if (this.province.currentSelect == null) {
        this.city.list = [];
        this.city.currentSelect = null;
        this.searchWord = null;
        this.refreshDistrictList();
        return;
      }
      getCityList({
        provinceId: this.province.currentSelect,
        searchWord: this.city.searchWord
      }).then(res => {
        this.city.list = res;
        this.city.currentSelect = null;
        this.refreshDistrictList();
      }).catch(errMsg => this.$alert(errMsg.msg))
    },
    refreshDistrictList () {
      if (this.city.currentSelect == null) {
        this.district.list = [];
        this.district.currentSelect = null;
        this.searchWord = null;
        return;
      }
      getDistrictList({
        cityId: this.city.currentSelect,
        searchWord: this.district.searchWord
      }).
        then(res => {
          this.district.currentSelect = null;
          this.district.list = res;
        }).catch(errMsg => this.$alert(errMsg.msg))
    },
    getCurrentSelectProvince () {
      if (this.province.currentSelect == null) {
        return null;
      }
      let currentProvince =
        this.province.list.find(item => item.id == this.province.currentSelect);
      return currentProvince;
    },
    getCurrentSelectCity () {
      if (this.city.currentSelect == null) {
        return null;
      }
      let currentCity =
        this.city.list.find(item => item.id === this.city.currentSelect);
      return currentCity;
    },
    getCurrentSelectDistrict () {
      if (this.district.currentSelect == null) {
        return null;
      }
      let currentDistrict =
        this.district.list.find(item => item.id === this.district.currentSelect);
      return currentDistrict;
    }
  },
  computed: {
    currentProvinceCode () {
      let currentProvince = this.getCurrentSelectProvince();
      if (currentProvince == null) {
        return null;
      }
      let currentProvinceCode = currentProvince.code;
      return currentProvinceCode.substring(0, 2);
    },
    currentProvinceName () {
      let currentProvince = this.getCurrentSelectProvince();
      if (currentProvince == null) {
        return null;
      }
      return currentProvince.name;
    },
    currentCityCode () {
      let currentCity = this.getCurrentSelectCity();
      if (currentCity == null) {
        return null;
      }
      return currentCity.code.substring(2, 4);
    },
    currentCityName () {
      let currentCity = this.getCurrentSelectCity();
      if (currentCity == null) {
        return null;
      }
      return currentCity.name;
    },
    currentDistrictCode () {
      let currentDistrict = this.getCurrentSelectDistrict();
      if (currentDistrict == null) {
        return null;
      }
      return currentDistrict.code.substring(4, 6);
    },
    currentDistrictName () {
      let currentDistrict = this.getCurrentSelectDistrict();
      if (currentDistrict == null) {
        return null;
      }
      return currentDistrict.name;
    }
  }
}
</script>
<style lang="stylus" scoped>
.area {
  padding-left: 30px;
  padding-top: 30px;

  .province-wrap, .city-wrap, .district-wrap {
    width: 260px;
    margin-right: 40px;
    float: left;

    .button-row {
      text-align: center;
      margin-top: 5px;
      margin-bottom: 5px;
    }
  }

  .province-add-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 20px;
    }
  }

  .province-update-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 20px;
    }
  }

  .city-add-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 20px;
    }
  }

  .city-edit-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 20px;
    }
  }

  .district-add-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 20px;
    }
  }

  .district-edit-dialog {
    .el-input {
      width: 200px;
      margin-bottom: 20px;
    }
  }
}
</style>